import CustomTextArea from '@/components/antd-comp/input/CustomTextArea'
import ModalComponent from '@/components/antd-comp/modal/ModalComponent'
import FouterPage from '@/components/fouter-page'
import { useRouteStoreHook } from '@/store/routeStore'
import { Card } from 'antd'
import { ArrowLeft } from 'lucide-react'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
import ShadTooltip from '../../components/ShadTooltipComponent'
import { knowledgeFileDetails } from '../../controllers/API/knowledge'
import { useTable } from '../../util/hook'
import './css/detail.css'
import InfoHead from './infoHead'

export default function Details() {
  const { t } = useTranslation()
  const routeNames = [t('menu.knowledge'), t('lib.details'), t('lib.fileDetails')]
  useRouteStoreHook(routeNames)

  const { id } = useParams()
  const location = useLocation()
  const searchParams = new URLSearchParams(location.search)
  const title = searchParams.get('file_name')
  const knowledgeId = searchParams.get('knowledge_id')
  const navigate = useNavigate()

  const {
    page,
    pageSize,
    data: dataSource,
    total,
    loading,
    setPage,
    reload
  } = useTable({ pageSize: 12 }, param => knowledgeFileDetails(param.page, param.pageSize, id))

  const info = {
    name: '基础信息',
    list: [
      {
        name: '文件大小',
        desc: searchParams.get('file_size')
      },
      {
        name: '切分设置',
        desc: searchParams.get('split_settings')
      },
      {
        name: '创建时间',
        desc: searchParams.get('create_time').replace('T', ' ')
      },
      {
        name: '标签',
        desc: searchParams.get('tags')
      }
    ]
  }
  /* 编辑dia */
  const [sliceDia, setSliceDia] = useState(false)
  const [sliceCont, setSliceCont] = useState('')
  const addDia = e => {
    console.log(e, 'eee')
    setSliceCont(e.text)
    setSliceDia(true)
  }
  return (
    <div className="relative h-full bg-[#F5F7FB]">
      <div className="relative top-[0] h-full overflow-y-scroll p-[32px] scrollbar-hide">
        <div className="flexRowStart">
          <ShadTooltip content="back" side="top">
            <button
              className="extra-side-bar-buttons w-[36px]"
              onClick={() => {
                navigate('/filelib/' + knowledgeId)
              }}
            >
              <Link to={'/filelib/' + knowledgeId}>
                <ArrowLeft className="side-bar-button-size" />
              </Link>
            </button>
          </ShadTooltip>
          <span className="px-4 text-sm font-black text-gray-700">{title}</span>
        </div>
        {/* info */}
        <div className="mt-[16px]">
          <InfoHead info={info}></InfoHead>
        </div>
        {/* list */}
        {loading ? (
          <div className="absolute left-0 top-0 z-10 flex h-full w-full items-center justify-center bg-[rgba(255,255,255,0.6)] dark:bg-blur-shared">
            <span className="loading loading-infinity loading-lg"></span>
          </div>
        ) : (
          <div className="k-file-detail-card mt-[16px] flex flex-wrap pb-[60px]">
            {dataSource.map((item: any) => (
              <Card hoverable key={item.id} bordered={false}>
                <div className="k-file-detail-content case_abs">
                  <div className="k-file-detail-content-status">
                    <div className="k-file-detail-content-status-index k-gray-text-info">
                      {'#' + item.id?.toString().padStart(3, '0')}
                    </div>
                    {/* <div className="flex justify-between">
                      <div className="flex items-center pr-1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
                          <circle cx="4" cy="4" r="4" fill="#38D0AF" />
                        </svg>
                      </div>
                      <div className="k-gray-text-info">已启用</div>
                    </div> */}
                  </div>
                  {/* <div className="k-file-detail-content-title">Q：云天畅想的商务合作联系方式是什么</div> */}
                  <div className="k-gray-text-info k-file-detail-content-content">{item.text}</div>
                  <div className="caseFouter flexRow flexRowJustBet">
                    {item.is_deep_analysis ? (
                      <span className="flexRow caseFouterDepth">{t('lib.dep')}</span>
                    ) : (
                      <span className="flexRow"></span>
                    )}

                    <span className="flexRowStart">
                      {item?.text?.length || 0}
                      {t('lib.character')}
                    </span>
                  </div>
                </div>
              </Card>
            ))}
          </div>
        )}
      </div>
      {/* footer */}
      <div className="absolute bottom-0 left-0 flex h-16 w-full items-center justify-end bg-[#f5f7fb] px-10">
        <FouterPage page={page} pageSize={pageSize} total={total} setPage={setPage}></FouterPage>
      </div>
      {/* 切片dia编辑 */}
      {sliceDia ? (
        <ModalComponent
          title="编辑"
          width={700}
          content={
            <div className="flexCol CustomTextArea_case">
              <CustomTextArea
                className="CustomTextArea_acquiesce caseOverFlowY border-none"
                // rows={8}
                // showCount
                onChange={e => {
                  setSliceCont(e.target.value)
                }}
                value={sliceCont}
              ></CustomTextArea>
              <span className="CustomTextArea_size">{sliceCont.length || 0}/500</span>
            </div>
          }
          okText="保存"
          cancelText="取消"
          onCancel={() => {
            setSliceDia(false)
          }}
          onOk={() => {
            // 编辑并保存刷新list
            setSliceDia(false)
            reload()
          }}
        />
      ) : null}
    </div>
  )
}
